<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>皮皮幼儿园管理系统</title>
    <link rel="stylesheet" href="util/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="util/swiper-4.5.0/dist/css/swiper.min.css">
    <script src="util/jquery-3.4.0.js"></script>
    <script src="util/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="css/base.css">
    <script src="util/swiper-4.5.0/dist/js/swiper.min.js"></script>
    <style>
        /*.bor{
            border: 1px solid red;
        }*/
        body,html,.index-box,.left,.right{
            height: 100%;
        }
        .index-body{
            width: 100%;
            margin: 0;
        }
        .row{
            overflow: hidden;
            height: 92%;
        }
        iframe{
            width: 100%;
            height: 100%;
            margin: 0;
            border: 2px solid #CCCCCC ;
            border-radius: 5px;
        }
        .index-box{
            padding: 0;
        }
        .index-top{
            position: relative;
            top: 40px;
        }
        .index-button-div{
            width: 100%;
            height: 100%;
        }
        .index-button{
            width: 100%;
            height: 60px;
            background: #5ab190;
            border: none;
            color: #CCCCCC;
            border-radius: 0;
        }
        .index-font{
            width: 20px;
            height: 20px;
            font-size: 20px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .index-font-num{
            position: absolute;
            font-size: 16px;
            color: gold;
            text-align: center;
            top: -5px;
            left: 11px;
        }
        .index-font-num1{
            color: white;
            position: absolute;
            left: 5px;
            top: 0;
            font-size: 12px;
        }
        .index-font-button{
            position: relative;
            left: 900px;
            top: -2px;
            width: 18px;
            height: 18px;
            border: none;
            background: rgba(0,0,0,0);
            color: black;
        }
        .index-font-button:hover{
            border: none;
            background: rgba(0,0,0,0);
            color: black;
        }
        .index-font-button1{
            position: relative;
            left: 915px;
            top: -2px;
            width: 20px;
            height: 20px;
            border: none;
            background: rgba(0,0,0,0);
            color: black;
        }
        .index-font-button1:hover{
            border: none;
            background: rgba(0,0,0,0);
            color: black;
        }
        .index-font-num2{
            position: absolute;
            font-size: 16px;
            color: green;
            text-align: center;
            top: -5px;
            left: 11px;
        }
        .index-left-img{
            position: relative;
            top: -18px;
            left: 0;
            cursor: pointer;
        }
        .index-left-img1{
            margin-left: 30px;
        }
        .index-nav-out{
            position: absolute;
            left: 1248px;
            top: 12px;
            color: black;
        }
        .index-nav-out:hover{
            text-decoration: none;
            color: black;
        }
        .index-left-font{
            left: -50px;
        }
        .index-left-font1{
            left: -65px;
        }
        .index-left-font2{
            left: -60px;
        }
        @media screen and (min-width:992px ) and (max-width: 1200px) {
            .index-font-button{
                position: relative;
                left: 730px;
                top: -2px;
                width: 20px;
                height: 20px;
                border: none;
                background: rgba(0,0,0,0);
                color: black;
            }
            .index-font-button1{
                position: relative;
                left: 760px;
                top: -2px;
                width: 20px;
                height: 20px;
                border: none;
                background: rgba(0,0,0,0);
            }
            .index-nav-out{
                position: absolute;
                left: 1079px;
                top: 12px;
                color: black;
            }
        }
        @media screen and (min-width:1300px ) and (max-width: 1360px){
            .index-font-button{
                position: relative;
                left: 940px;
                top: -2px;
                width: 20px;
                height: 20px;
                border: none;
                background: rgba(0,0,0,0);
                color: black;
            }
            .index-font-button1{
                position: relative;
                left: 950px;
                top: -2px;
                width: 20px;
                height: 20px;
                border: none;
                background: rgba(0,0,0,0);
            }
            .index-nav-out{
                position: absolute;
                left: 1269px;
                top: 12px;
                color: black;
            }
        }
        @media screen and (min-width:1200px ) and (max-width: 1300px){
            .index-font-button{
                position: relative;
                left: 820px;
                top: -2px;
                width: 20px;
                height: 20px;
                border: none;
                background: rgba(0,0,0,0);
                color: black;
            }
            .index-font-button1{
                position: relative;
                left: 830px;
                top: -2px;
                width: 20px;
                height: 20px;
                border: none;
                background: rgba(0,0,0,0);
            }
            .index-nav-out{
                position: absolute;
                left: 1150px;
                top: 12px;
                color: black;
            }
        }


        .index-information-img{
            position: absolute;
            left: 482px;
            top: 0;
        }
        .index-personal-information{
            border: none;
            background: white;
            color: black;
        }
        .index-personal-information:hover{
            border: none;
            background: white;
            color: black;
        }
        #oF{
            position: absolute;
            left: 416px;
            top: 102px;
        }
        #oB{
            position: absolute;
            left: 416px;
            top: 128px;
            width: 175px;
        }
    </style>

</head>
<body>
    <div class="container-fluid index-box">
        <div class="bor col-md-12 index-nav">
            <img src="image/index/5.png" alt="" width="230" height="50">
            <button class="index-font-button btn-lg" type="button"  data-toggle="modal" data-target="#myModal1">
                <span class="glyphicon glyphicon-envelope index-font">
                    <span class="index-font-num glyphicon glyphicon-comment">
                        <span class="index-font-num1">5</span>
                    </span>
                </span>
            </button>
            <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel1">Modal title</h4>
                        </div>
                        <div class="modal-body">
                            ...
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
            <button class="index-font-button1 btn-lg" type="button"  data-toggle="modal" data-target="#myModal2">
                <span class="glyphicon glyphicon-bell index-font">
                    <span class="index-font-num2 glyphicon glyphicon-comment">
                        <span class="index-font-num1">3</span>
                    </span>
                </span>
            </button>
            <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel2">Modal title</h4>
                        </div>
                        <div class="modal-body">
                            ...
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
            <a href="signin.html" class="index-nav-out">退出登录<span class="glyphicon glyphicon-triangle-right"></span></a>
        </div>
        <div class="row index-body">
            <div class="col-lg-2 col-md-2 index-box index-top left">
                <div class="btn-group-vertical index-button-div" role="group" aria-label="...">
                    <div class="index-left-img">
                        <button type="button" class="btn-lg index-personal-information" data-toggle="modal" data-target="#myModal" id="index-information-btn1">
                        <img src="image/index/4.jpg" alt="" id="index-information-img2" class="img-circle index-left-img1" width="50" height="50">
                        <span id="index-information-span">xxx:xxx</span>
                        </button>
                        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title" id="myModalLabel">个人信息</h4>
                                    </div>
                                    <div class="modal-body">
                                        <table class="table table-hover" id="index-information-table">
                                            <img src="image/index/4.jpg" alt="" class="index-information-img" id="index-information-img1" width="100" height="100">
                                            <input type="file" id="oF" value="选择图片">
                                            <button id="oB">上传图片</button>
                                            <tr>
                                                <td>姓名：&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" value="小王老师" id="index-information-inp1" disabled></td>
                                            </tr>
                                            <tr>
                                                <td>性别：&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" value="男" id="index-information-inp2" disabled></td>
                                            </tr>
                                            <tr>
                                                <td>出生日期：<input type="text" value="96-10-1" id="index-information-inp3" disabled></td>
                                            </tr>
                                            <tr>
                                                <td>联系电话：<input type="text" value="11111111111" id="index-information-inp4" disabled></td>
                                            </tr>
                                            <tr>
                                                <td>地址：&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" value="行行行行行行行行行行行行" id="index-information-inp5" disabled></td>
                                            </tr>
                                            <th>个人简介：</th>
                                            <tr>
                                                <td>
                                                    想行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                        <button type="button" class="btn btn-default"  id="index-information-btn">编辑</button>
                                        <button type="button" class="btn btn-primary" id="index-information-btn2">保存</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <a href="page/index1.html" target="show"><button type="button" class="btn btn-default index-button"><span class="glyphicon glyphicon-home index-left-font1"></span>首页</button></a>
                    <a href="page/Classmanagement/Class.html" target="show"><button type="button" disabled  id="index-btn1" class="btn btn-default index-button"><span class="glyphicon glyphicon-cog index-left-font"></span>班级管理</button></a>
                    <a href="page/LXM/studentManagment1.html" target="show"><button type="button" disabled  id="index-btn2" class="btn btn-default index-button"><span class="glyphicon glyphicon-link index-left-font"></span>学生管理</button></a>
                    <a href="page/lftypages/Staff%20management.html" target="show"><button type="button" disabled  id="index-btn3" class="btn btn-default index-button"><span class="glyphicon glyphicon-inbox index-left-font"></span>职工管理</button></a>
                    <a href="page/logistics.html" target="show"><button type="button" disabled  id="index-btn4" class="btn btn-default index-button"><span class="glyphicon glyphicon-saved index-left-font"></span>考勤管理</button></a>
                    <a href="page/LXM/photos.html" target="show"><button type="button" disabled  id="index-btn5" class="btn btn-default index-button"><span class="glyphicon glyphicon-apple index-left-font2"></span>时光轴</button></a>
                    <a href="" target="show"><button type="button" disabled  id="index-btn6" class="btn btn-default  index-button"><span class="glyphicon glyphicon-unchecked index-left-font2"></span>公告栏</button></a>
                    <a href="page/jurisdiction.html" target="show"><button disabled  id="index-btn7" type="button" class="btn btn-default index-button"><span class="glyphicon glyphicon-eye-open index-left-font"></span>权限管理</button></a>
                </div>
            </div>
            <div class="col-lg-10 col-md-10 bor right">
                <iframe name="show" src="page/index1.html" frameborder="0" scrolling="no"></iframe>
            </div>
        </div>
    </div>
    <script src="js/index/base1.js"></script>
</body>
</html>